<template>
  <div class="chart-date-picker">
    <el-radio-group
      v-model="dateType"
      size="mini"
      @change="handleChange"
      style="margin-left: 15px"
    >
      <el-radio-button label="date">日</el-radio-button>
      <el-radio-button label="week">周</el-radio-button>
      <el-radio-button label="month">月</el-radio-button>
      <!-- <el-radio-button label="year">年</el-radio-button> -->
      <el-radio-button label="daterange">自定义</el-radio-button>
    </el-radio-group>

    <template>
      <!-- 日期 范围选择 -->
      <el-date-picker
        key="daterange"
        v-if="dateType == 'daterange'"
        v-model="dataForm.rangeDate"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 240px"
        @change="handleChange"
        size="mini"
      />
      <!-- 单选 -->
      <el-date-picker
        v-else
        :clearable="false"
        v-model="date"
        size="mini"
        :picker-options="{ firstDayOfWeek: 1 }"
        :type="dateType"
        :format="dateType === 'week' ? 'yyyy 第 WW 周' : null"
        :placeholder="
          dateType === 'date'
            ? '选择日'
            : dateType === 'week'
            ? '选择周'
            : dateType === 'month'
            ? '选择月'
            : dateType === 'year'
            ? '选择年'
            : ''
        "
        style="width: 140px; vertical-align: middle"
        @change="handleChange"
      ></el-date-picker>
    </template>
  </div>
</template>

<script>
import { dateFormat } from "./index";
export default {
  name: "date",
  props: {
    value: {
      type: Date,
    },
    type: {
      type: String,
      default: "week",
    },
  },
  data() {
    return {
      dateType: "",
      date: null,

      dataForm: {
        date: "",
        rangeDate: [],
        dateStart: "",
        dateEnd: "",
      },
    };
  },
  created() {
    this.handleChange(); // 初始化
  },
  methods: {
    datePickerChage() {
      let timeObj = {
        dateType: this.dateType,
        startTime: this.dataForm.rangeDate[0],
        endTime: this.dataForm.rangeDate[1],
      };

      return timeObj;
    },
    handleChange() {
      let obj = this.timeDifference(this.date, this.dateType);
      this.$emit("handleChangeTime", obj);
      if (this.dateType == "daterange") {
        let obj = this.datePickerChage();
        this.$emit("handleChangeTime", obj);
      }
    },
    timeDifference() {
      let timeObj = {};
      // this.date = ;
      let time = new Date(dateFormat(this.date, "yyyy-MM-dd")); // 可入参指定时间
      let year = time.getFullYear();
      let month = time.getMonth();
      let date = time.getDate(); // 获取日期
      let day = time.getDay(); // 获取周几，0-6，0表示周日
      let _day = day == 0 ? 7 : day;
      switch (this.dateType) {
        case "date":
          timeObj = {
            endTime: `${dateFormat(this.date, "yyyy-MM-dd")} 23:59:59`,
            startTime: `${dateFormat(this.date, "yyyy-MM-dd")} 00:00:00`,

            dateType: this.dateType,
          };
          break;
        case "week":
          // 获取周一日期
          var startDate = new Date(year, month, date - _day + 1);
          // 获取周日日期
          var endDate = new Date(
            new Date(startDate).getTime() + 6 * 24 * 3600 * 1000
          );
          timeObj = {
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,

            dateType: this.dateType,
          };
          break;
        case "month":
          var startDate = new Date(year, month, 1);
          var endDate = new Date(year, month + 1, 0);
          timeObj = {
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,

            dateType: this.dateType,
          };
          break;
        case "year":
          var startDate = new Date(year, 0, 1);
          var endDate = new Date(year, 12, 0);
          timeObj = {
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,
            dateType: this.dateType,
          };
          break;
      }
      return timeObj;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.date = val;
      },
    },
    type: {
      immediate: true,
      handler(val) {
        if (val === this.dateType) {
          return;
        }
        this.dateType = val;
      },
    },
    date: {
      immediate: true,
      handler(val) {
        this.$emit("input", val);
      },
    },
    dateType: {
      immediate: true,
      handler(val) {
        if (val === this.type) {
          return;
        }
        this.$emit("update:type", val);
      },
    },
  },
};
</script>

<style lang="scss">
.chart-date-picker {
  .el-radio-button--mini .el-radio-button__inner {
    padding: 5px 15px;
    // margin-top: 5%;
    // margin-left: 8px;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 15px 0 0 15px;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }

  .el-input--mini .el-input__inner {
    height: 24px;
    line-height: 24px;
  }

  .el-input--mini .el-input__icon {
    line-height: 24px;
  }

  .el-input__inner {
    border-left: none;
    border-radius: 0 15px 15px 0;
  }
}
</style>

<style lang="scss" scoped>
//   .chart-date-picker {
//   }
</style>
